<template>
    <div id="app">
        <transition name="page" mode="out-in">
            <component :is="layout" v-if="layout"/>
        </transition>
    </div>
</template>
<script>

    // Load layout components dynamically.
    const requireContext = require.context('./layouts', false, /.*\.vue$/)

    const layouts = requireContext.keys()
        .map(file =>
            [file.replace(/(^.\/)|(\.vue$)/g, ''), requireContext(file)]
        )
        .reduce((components, [name, component]) => {
            components[name] = component.default || component
            return components
        }, {})

    export default {
        el:'#app',
        components: {},

        data: () => ({
            layout: null,
            defaultLayout: 'default'
        }),

        metaInfo() {
            const {appName} = {appName: '养车无忧'}

            return {
                title: appName,
                meta: [
                    { charset: 'utf-8' },
                    { name: 'viewport', content: 'width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes' }
                ]
                // titleTemplate: `%s · ${this.$route.meta.title || ''}`
            }
        },

        mounted() {
          this.setLayout(null)
          this.getLocation()
        },

        methods: {

            setLayout(layout) {
                if (!layout || !layouts[layout]) {
                    layout = this.defaultLayout
                }
                this.layout = layouts[layout]
            },
            getLocation(){
                if (navigator.geolocation){
                    navigator.geolocation.getCurrentPosition(this.showPosition,this.showError,{
                        enableHighAcuracy : true,// 指示浏览器获取高精度的位置，默认为false  
                        maximumAge : 2000 // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。  
                    });
                }
            },
            showPosition(position){
                this.$store.commit('auth/getAddress',{
                    lng: position.coords.longitude,
                    lat: position.coords.latitude,
                })
            },
            showError(error){
                console.log(error)
            },
        }
    }
</script>
<style>
    body {
        font-size: 16px;
        background-color: #f8f8f8;
        -webkit-font-smoothing: antialiased;
    }
</style>
